/**
 * Created by Administrator on 2016/12/16.
 */
window.onload=function(){
    leftSwipe();
}

function leftSwipe(){
    /*获取滑动的ul*/
    var jd_left=document.querySelector('.jd_left');
    var ulBox=jd_left.querySelector('ul');

    /*获取父容器高度*/
    var leftHeight=jd_left.offsetHeight;
    /*获取用于滑动的Ul高度*/
    var ulHeight=ulBox.offsetHeight;

    /*设置静止状态的下的区间范围*/
    var maxPosition=0;
    var minPosition=leftHeight-ulHeight;
    var maxBaoPosition = maxPosition+100;
    var minBaoPosition =minPosition-100;

    /*定义一些常用函数*/
    var openTransition=function(){
        ulBox.style.transition='all .2s';
        ulBox.style.webkitTransition='all .2s';
    }
    var closeTransition=function(){
        ulBox.style.transition='none';
        ulBox.style.webkitTransition='none';
    }
    var setTransform=function(distance){
        ulBox.style.transform='translateY('+distance+'px)'
        ulBox.style.webkitTransform='translateY('+distance+'px)'
    }

    /*添加滑动事件*/
    var startY=0;
    var moveY=0;
    var distanceY=0;
    var currentY=0;//当前元素在Y方向上已经滑动的距离

    ulBox.addEventListener('touchstart',function(e){
        startY= e.touches[0].clientY;
    });
    ulBox.addEventListener('touchmove',function(e){
        moveY= e.touches[0].clientY;
        /*计算偏移*/
        distanceY=moveY-startY;
        if(currentY+distanceY>maxBaoPosition||currentY+distanceY<minBaoPosition){
            return;
        }
            /*关闭过渡*/
            closeTransition();
            /*设置偏移*/
            setTransform(currentY+distanceY);
    });
    ulBox.addEventListener('touchend',function(e){
        /*记录当前已经滑动的距离值*/
        /*判断在之前的距离基础止，本次滑动的距离是否超出了指定的区间范围*/
        if(currentY+distanceY > maxPosition){
            currentY=maxPosition;
            /*关闭过渡*/
            openTransition();
            /*设置偏移*/
            setTransform(maxPosition);
        }
        else if(currentY+distanceY < minPosition){
            currentY=minPosition;
            /*关闭过渡*/
            openTransition();
            /*设置偏移*/
            setTransform(minPosition);
        }else{
            currentY+=distanceY;
        }
        console.log(currentY);
    });
    //偏移事件，先注册事件
    var lis = ulBox.querySelectorAll('li');
    var liheight = lis[0].offsetHeight;
    for(var i = 0;i<lis.length;i++){
        lis[i].index = i;
    }
    LLL.tap(ulBox,function(e){
        for(var i = 0;i<lis.length;i++){
            lis[i].classList.remove('active');
        }
        e.target.parentNode.classList.add('active');
        console.log(e.target.parentNode);
        //偏移
        var index = e.target.parentNode.index;
        if(-index*liheight<minPosition){
            currentY = minPosition;
            openTransition();
            setTransform(minPosition);
        }else{
            openTransition();
            setTransform(-index*liheight);
        }
    })
}